<!-- <template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <p class="inforMainHd">{{infor.ip}}<i v-if="infor.remark">（{{infor.remark}}）</i><span @click="goBack">返回</span></p>
            </div>
          </template>
          <div class="inforTimeModule">
            <el-select v-model="queryParams.date" class="time_select" @change="change_date">
              <el-option
                  v-for="(dict,index) in times_list"
                  :key="index"
                  :label="dict"
                  :value="dict"
              />
            </el-select>
            <div class="am_list">
              <p v-for="(item,index) in amList" @click="click_am(item.value,index)" :class="[active_index==index?'active':'']">{{item.label}}</p>
            </div>
          </div>
          <h3 class="inforTitle">cpu使用率%  最高 <span class="zuigao"><i></i>{{cpuUsedPercent.cpuHighest}} </span>平均 <span class="pingjun"><i></i>{{cpuUsedPercent.cpuAvg}}</span> 最低 <span class="zuidi"><i></i>{{cpuUsedPercent.cpuLowest}}</span></h3>
          <div ref="commandstats_cpu" style="height: 500px" />
          <h3 class="inforTitle">内存使用率%  最高 <span class="zuigao"><i></i>{{memUsedPercent.memHighest}} </span>平均 <span class="pingjun"><i></i>{{memUsedPercent.memAvg}}</span> 最低 <span class="zuidi"><i></i>{{memUsedPercent.memLowest}}</span></h3>
          <div ref="commandstats_mem" style="height: 500px" />
          <h3 class="inforTitle">网络接收/发送流量（即下行/上行传输速率）KB/秒  下行最高 <span class="zuigao"><i></i>{{netWorkFlow.downHighest}} </span>平均 <span class="pingjun"><i></i>{{netWorkFlow.downAvg}}</span> 最低 <span class="zuidi"><i></i>{{netWorkFlow.downLowest}}</span>  上行最高 <span class="zuigao"><i></i>{{netWorkFlow.upHighest}} </span>平均 <span class="pingjun"><i></i>{{netWorkFlow.upAvg}}</span> 最低 <span class="zuidi"><i></i>{{netWorkFlow.upLowest}}</span></h3>
          <div ref="commandstats_net" style="height: 500px" />
          <h3 class="inforTitle">系统负载 1分钟最高 <span class="zuigao"><i></i>{{sysLoadRate.oneMinuteH}} </span>平均 <span class="pingjun"><i></i>{{sysLoadRate.oneMinuteAvg}}</span> 最低 <span class="zuidi"><i></i>{{sysLoadRate.oneMinuteL}}</span>  5分钟最高 <span class="zuigao"><i></i>{{sysLoadRate.fiveMinuteH}} </span>平均 <span class="pingjun"><i></i>{{sysLoadRate.fiveMinuteAvg}}</span> 最低 <span class="zuidi"><i></i>{{sysLoadRate.fiveMinuteL}}</span>   15分钟最高 <span class="zuigao"><i></i>{{sysLoadRate.fifteenMinuteH}} </span>平均 <span class="pingjun"><i></i>{{sysLoadRate.fifteenMinuteAvg}}</span> 最低 <span class="zuidi"><i></i>{{sysLoadRate.fifteenMinuteL}}</span></h3>
          <div ref="commandstats_sys" style="height: 500px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { getChartHost } from '@/api/common';
import * as echarts from 'echarts';

const router = useRoute();
const { proxy } = getCurrentInstance();
const infor = ref({});
const cpuUsedPercent = ref({});
const memUsedPercent = ref({});
const netWorkFlow = ref({});
const sysLoadRate = ref({});

const commandstats_cpu = ref(null);
const commandstats_mem = ref(null);
const commandstats_net = ref(null);
const commandstats_sys = ref(null);

const times_list = ref([]);
const active_index = ref(0);
const amList = ref(
    [{value:'am0', label:'全天'},
      {value:'am1', label:'00:00至05:59'},
      {value:'am2', label:'06:00至11:59'},
      {value:'am3', label:'12:00至17:59'},
      {value:'am4', label:'18:00至23:59'}
    ]);
const data = reactive({
  queryParams: {
    ip: router.query.ip,
    date: '',
    am: ''
  }
});
const { queryParams } = toRefs(data);

//获取日期
function getTimes(){
  let days = [];
  let day = new Date();
  for(let i = 0; i <= 144; i += 24){  //144是前六天的小时数
    let dateItem=new Date(day.getTime() - i * 60 * 60 * 1000);
    let y = dateItem.getFullYear();
    let m = (dateItem.getMonth() + 1).toString().padStart(2, '0');
    let d= dateItem.getDate().toString().padStart(2, '0');
    days.push(y + '-' + m + '-' + d);
  }
  //最近七天的日期
  times_list.value = days;
  queryParams.value.date = times_list.value[0];
  isDuringDate('1', queryParams.value.date+' 00:00', queryParams.value.date+' 05:59');
  isDuringDate('2', queryParams.value.date+' 06:00', queryParams.value.date+' 11:59');
  isDuringDate('3', queryParams.value.date+' 12:00', queryParams.value.date+' 17:59');
  isDuringDate('4', queryParams.value.date+' 18:00', queryParams.value.date+' 23:59');
}

//判断时间段是否在范围内
function isDuringDate(index, beginDateStr, endDateStr){
  var curDate = new Date(),
      beginDate = new Date(beginDateStr),
      endDate = new Date(endDateStr);
  if(curDate >= beginDate && curDate <= endDate){
    queryParams.value.am = 'am'+index;
    active_index.value = parseInt(index);
    return true;
  }
  return false;
}

//获取数据
function getData() {
  proxy.$modal.loading("正在加载");
  getChartHost((queryParams.value)).then(response => {
    proxy.$modal.closeLoading();
    infor.value = response.data;
    let chart_cpu = [];
    let chart_mem = [];
    let chart_net = [];
    let chart_sys = [];
    //图表数据
    if(response.data.cpuUsedPercent){
      cpuUsedPercent.value = response.data.cpuUsedPercent;
      chart_cpu = cpuUsedPercent.value.chart;
    }
    if(response.data.memUsedPercent){
      memUsedPercent.value = response.data.memUsedPercent;
      chart_mem= memUsedPercent.value.chart;
    }
    if(response.data.netWorkFlow){
      netWorkFlow.value = response.data.netWorkFlow;
      chart_net= netWorkFlow.value.chart;
    }
    if(response.data.sysLoadRate){
      sysLoadRate.value = response.data.sysLoadRate;
      chart_sys= sysLoadRate.value.chart;
    }
    //图表比率时间的赋值
    //cpu
    let percents_cpu = [];
    let times_cpu = [];
    if(chart_cpu&&chart_cpu.length>0){
      for(let i=0; i<chart_cpu.length; i++){
        percents_cpu.push(chart_cpu[i].percent);
        times_cpu.push(chart_cpu[i].time);
      }
    }
    //内存
    let percents_mem = [];
    let times_mem = [];
    if(chart_mem&&chart_mem.length>0){
      for(let i=0; i<chart_mem.length; i++){
        percents_mem.push(chart_mem[i].percent);
        times_mem.push(chart_mem[i].time);
      }
    }
    //网络接收/发送流量
    let receipt_net = [];
    let send_net = [];
    let times_net = [];
    if(chart_net&&chart_net.length>0){
      for(let i=0; i<chart_net.length; i++){
        receipt_net.push(chart_net[i].receipt);
        send_net.push(chart_net[i].send);
        times_net.push(chart_net[i].time);
      }
    }
    //系统负载
    let oneMinute_sys = [];
    let fiveMinute_sys = [];
    let fifteenMinute_sys = [];
    let times_sys = [];
    if(chart_sys&&chart_sys.length>0){
      for(let i=0; i<chart_sys.length; i++){
        oneMinute_sys.push(chart_sys[i].oneMinute);
        fiveMinute_sys.push(chart_sys[i].fiveMinute);
        fifteenMinute_sys.push(chart_sys[i].fifteenMinute);
        times_sys.push(chart_sys[i].time);
      }
    }
    // if (commandstatsIntance_cpu!= null && commandstatsIntance_cpu != "" && commandstatsIntance_cpu != undefined) {
    //   commandstatsIntance_cpu.dispose();
    // }
    const commandstatsIntance_cpu  = echarts.init(commandstats_cpu.value);
    commandstatsIntance_cpu.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times_cpu
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'cpu使用',
          type: 'line',
          data: percents_cpu
        }
      ]
    });

    const commandstatsIntance_mem = echarts.init(commandstats_mem.value);
    commandstatsIntance_mem.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times_mem
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '内存使用',
          type: 'line',
          data: percents_mem
        }
      ]
    });

    const commandstatsIntance_net = echarts.init(commandstats_net.value);
    commandstatsIntance_net.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times_net
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '网络接收流量',
          type: 'line',
          data: receipt_net
        },
        {
          name: '网络发送流量',
          type: 'line',
          data: send_net
        }
      ]
    });

    const commandstatsIntance_sys = echarts.init(commandstats_sys.value);
    commandstatsIntance_sys.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: times_sys
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '系统负载:1分钟负载',
          type: 'line',
          data: oneMinute_sys
        },
        {
          name: '系统负载:5分钟负载',
          type: 'line',
          data: fiveMinute_sys
        },
        {
          name: '系统负载:15分钟负载',
          type: 'line',
          data: fifteenMinute_sys
        }
      ]
    });
  })
}
//选择日期
function change_date(val){
  queryParams.value.date = val;
  getData();
}

//选择时间段
function click_am(value,index){
  active_index.value = index;
  queryParams.value.am = value;
  getData();
}

//返回
function goBack(){
  proxy.$router.go(-1);
}
getTimes();
getData();
</script>

<style scoped>
.inforMainHd{
  padding: 5px 0;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  overflow: hidden;
}
.inforMainHd i{
  font-style: normal;
}
.inforMainHd span{
  float: right;
  font-size: 14px;
  color: rgb(64, 158, 255);
  cursor: pointer;
}
.inforBlock{
  padding-bottom: 10px;
  border-bottom: 1px solid #f2f2f2;
}
.inforBlock strong{
  color: #000;
  font-size: 16px;
  font-weight: bold;
}
.inforBlock p{
  font-size: 14px;
  line-height: 22px;
}
.inforTitle{
  color: #000;
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
  padding: 5px 0;
  margin: 0;
}
.inforContent{
  color: #000;
  font-size: 14px;
  line-height: 24px;
  margin: 0;
}
.inforContent strong{
  font-weight: bold;
}
.inforTitle span{
  margin-right: 10px;
}
.inforTitle i{
  width: 0;
  height: 0;
  margin-right: 3px;
  vertical-align: middle;
  display: inline-block;
}
.inforTitle .zuigao{
  color: #d81b60;
}
.inforTitle .zuigao i{
  border-top: 5px solid #d81b60;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.inforTitle .pingjun{
  color: #f4c512;
}
.inforTitle .pingjun i{
  border-right: 5px solid #f4c512;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.inforTitle .zuidi{
  color: #55d327;
}
.inforTitle .zuidi i{
  border-bottom: 5px solid #55d327;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.inforMt{
  margin-bottom: 15px;
}
.inforTimeModule{
  padding: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.am_list{
  display: flex;
  align-items: center;
}
.am_list p{
  color: #007bff;
  border: 1px solid #007bff;
  border-radius: 3px;
  width: 130px;
  height: 32px;
  line-height: 32px;
  font-size: 13px;
  text-align: center;
  margin: 0 0 0 25px;
  cursor: pointer;
}
.am_list p:hover{
  background: #007bff;
  color: #fff;
}
.am_list p.active{
  background: #007bff;
  color: #fff;
}
</style> -->
